<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>事故信息确认</title>
		
		
		<link rel="stylesheet" href="../statics/css/wg/bootstrap.min.css" />
		
		<link rel="stylesheet" href="../statics/css/wg/bootstrap-chinese-region.css" />
			<script type="text/javascript" src="../statics/js/jquery-1.12.4.js" ></script>
		<!--<script type="text/javascript" src="../statics/js/wg/jquery.min.js" ></script>-->
		<script type="text/javascript" src="../statics/js/wg/bootstrap.min.js"></script>
		<script type="text/javascript" src="../statics/js/wg/bootstrap-chinese-region.js"></script>
		

		
		
		<style type="text/css">
			.both {
				background-color: #daf3f5;
				height: 100%;
			}
			
			.discribe {
				background-color: #03d8eb;
				border-radius: 1em;
				margin-top: 1em;
			}
			
			.discribe4 {
				background-color: white;
				border-radius: 1em;
				margin-top: 1em;
				margin-bottom:1em; 
			}
			
			.a {
				height: 100%;
			}
			
			.discribe1,
			.discribe2 {
				background-color: white;
				border-radius: 1em;
				margin: 1em 0em 0em 0em;
			}
			
			.discribe1 {
				position: relative;
				background: #fff url(../statics/img/rgz_img/1.png) no-repeat 0 0;
				background-size: 100%;
			}
			
			.discribe3 {
				background-color: white;
				border-radius: 1em;
				margin: 1em 0em 1em 0em;
			}
			
			.btn-group1 {
				position: absolute;
				top: 9em;
				left: 1em;
			}
			
			.btn-group {
				position: absolute;
				bottom: 1em;
				left: 1em;
			}
			
			.b {
				border: 1px solid #03d8eb;
				color: #03d8eb;
				background-color: white;
				width: 9.5em;
			}
			
			.c {
				border: 1px solid #03d8eb;
				color: #03d8eb;
				background-color: white;
				width: 9.5em;
				margin-bottom:1em; 
			}
			
			.d {
				margin-right: 0.5em;
			}
			
			.cirle {
				position: absolute;
				top: 0.5em;
				left: 0.5em;
				border-radius: 50%;
				background-color: #03d8eb;
				width: 0.5em;
				height: 0.5em;
			}
			.font{
				position: absolute;
				top: 1em;
				left: 7em;
				font-size: 1.2em;
				
			}
			#click{
				background-color:#03d8eb ;
				color: white;
			}
			.confirm{
			    list-style-type: none;
			    text-align:center;
			    margin-top:1em ;
			}
			.confirm li{
			border-bottom: 0.1em solid gainsboro;
			padding: 0.5em 0 0.5em 0;
			
			}
			.sf{
				position: absolute;
				top: 59.7em;
				left: 2em;
			}
			.xuanzedf{
				position: absolute;
				top: 62em;
				left: 2em;
			                                                                                                                                                                                                                                                                                                                                                                                                                                                            
			}
			.sumxyb{
				position: relative;
				width: 100%;
				bottom:0em;
				height:4em;
				line-height:4em;;
				background: #87CEFA;
				left: 0em;
				color: white;
			}
			
		</style>
		
		
	
		

	</head>

	<body class="both">
	    <form action="ccx_photo_in" id="form01" method="post">
		<div class="container-fluid">
			<div class="col-xs-12 discribe">
			<!--人员伤亡状态  -->
				<div class="col-xs-12 discribe1">
					<div class="btn-group1" data-toggle="buttons">
						<label class="btn b d" id="click">
                 <input type="radio" name="casualtystatus" id="option1" checked="checked" value="0"> 是
             </label>
						<label class="btn b">
                 <input type="radio" name="casualtystatus" id="option2" value="1"> 否
             </label>

					</div>

					<br/>
					<br/>
					<br/>
					<br/>
					<br/>
					<br/>
					<br />
					<br />
					<br />
					<br />
				</div>
				<!--iscarnormal  -->
				<div class="col-xs-12 discribe2">
					<div class="cirle"></div>
					<div class="font">
						车是否能开？
					</div>
					<div class="btn-group" data-toggle="buttons">
						<label class="btn c d" id="click">
                 <input type="radio" name="iscarnormal" id="option1"  checked="checked" value="0"> 是
             </label>
						<label class="btn c">
                 <input type="radio" name="iscarnormal" id="option2" value="1"> 否
             </label>

					</div>
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					
				</div>
				<div class="col-xs-12 discribe2">
					<div class="cirle"></div>
                    <div class="font">
						是否在现场？
					</div>
					<div class="btn-group" data-toggle="buttons">
						<label class="btn c d" id="click">
                 <input type="radio" name="ishere" id="option1"  checked="checked" value="0"> 是
             </label>
						<label class="btn c">
                 <input type="radio" name="ishere" id="option2" value="1"> 否
             </label>

					</div>
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
				</div>
				<div class="col-xs-12 discribe2">
					<div class="cirle"></div>
					<div class="font">
						事故情况
					</div>
					<div class="btn-group" data-toggle="buttons">
						<label class="btn c d" id="click">
                 <input type="radio" name="isone" id="option1"  checked="checked" value="0"> 只有一辆车
             </label>
						<label class="btn c">
                 <input type="radio" name="isone" id="option2" value="1">两辆车以上
             </label>

					</div>
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
				</div>
				<div class="col-xs-12 discribe3">
					<div class="cirle"></div>
					<div class="font">
						事故类型
					</div>
					<div class="btn-group" data-toggle="buttons">
						<label class="btn c d" id="click">
                 <input type="radio" name="accidentid" id="option1"  checked="checked" value="1"> 行驶受损
             </label>
						<label class="btn c">
                 <input type="radio" name="accidentid" id="option2" value="2"> 停放受损
             </label>
             <label class="btn c d">
                 <input type="radio" name="accidentid" id="option1" value="3"> 玻璃单独受损
             </label>
						<label class="btn c">
                 <input type="radio" name="accidentid" id="option2" value="4"> 自然灾害
             </label>
             <label class="btn c d">
                 <input type="radio" name="accidentid" id="option1" value="5"> 其他
             </label>
			

					</div>
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					
					
				</div>

				

			</div>

    <div class="col-xs-12 discribe4">
            <ul class="col-xs-12 confirm">
            	<li class="col-xs-12 "><span style="font-size: 1em;font-weight: bold;">出险时间</span><input class="cxtime" name="insurancetime" type="date" ></li>
            	<li class="col-xs-12"><span style="font-size: 1em;font-weight: bold;">出险地点</span>
            		
            		
            	</li>
            	<li class="col-xs-12">11</li>
            	<li class="col-xs-12"><span style="font-size: 1em;font-weight: bold;">车牌号码</span><input name="carnumber" id="carnumber" style="text-align: center; border: none;" type="text" placeholder="如：鄂A12345"/></li>
            	<li class="col-xs-12"><span style="font-size: 1em;font-weight: bold;">驾驶员</span><input name="driver" id="driver" style="text-align: center; border: none;" type="text" placeholder="请输入驾驶员姓名"/></li>
            	<li class="col-xs-12"><span style="font-size: 1em;font-weight: bold;">联系电话</span><input name="casephone" id="casephone"   style="text-align: center;border: none;" type="text" placeholder="请输入联系电话"/></li>
            	<li class="col-xs-12"><span style="font-size: 1em;font-weight: bold;">被保人姓名</span><input name="insuredname"  id="insuredname" style="text-align: center;border: none;" type="text" placeholder="请输入被保人名称"/></li>
            	<li class="col-xs-12"><span style="font-size: 1em;font-weight: bold;">被保人证件号</span><input name="identity"  id="identity" style="text-align: center;border: none;" type="text" placeholder="请输入被保人身份证"/></li>
            </ul>
    		
    		  
	</div>
    <div class="form-group " style="width: 20em; position: relative; top: 10em; left: 0em;">
			<div class="bs-chinese-region flat dropdown" data-submit-type="id" data-min-level="1" data-max-level="3">
				<input type="text" class="form-control sf" name="insuranceaddress" id="address" placeholder="选择你的地区" data-toggle="dropdown" readonly="" value="">
				<div class="dropdown-menu xuanzedf" role="menu" aria-labelledby="dLabel">
					<div>
						<ul class="nav nav-tabs" role="tablist">
							<li role="presentation" class="active">
								<a href="#province" data-next="city" role="tab" data-toggle="tab">省份</a>
							</li>
							<li role="presentation">
								<a href="#city" data-next="district" role="tab" data-toggle="tab">城市</a>
							</li>
							<li role="presentation">
								<a href="#district" data-next="street" role="tab" data-toggle="tab">县区</a>
							</li>
						</ul>
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="province">--</div>
							<div role="tabpanel" class="tab-pane" id="city">--</div>
							<div role="tabpanel" class="tab-pane" id="district">--</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div>
	</div>
 	
</div>
<input class="sumxyb" type="submit" value="下一步"/>
</form>
		
		
		
		
	</body>
	
    <script type="text/javascript">
    		$(function(){
    		   
				$("div label").click(function(){
					$(this).attr("id","click")
					$(this).siblings().removeAttr("id")
				})
				
				
				
			
			})
    		
    		
    		
    		$.getJSON('statics/lib/bootstrap-chinese-region/sql_areas.json', function(data) {

			for(var i = 0; i < data.length; i++) {
				var area = {
					id: data[i].id,
					name: data[i].cname,
					level: data[i].level,
					parentId: data[i].upid
				};
				data[i] = area;
			}

			$('.bs-chinese-region').chineseRegion('source', data); 

			$('.bs-chinese-region').chineseRegion('source', data)
			$('.bs-chinese-region').chineseRegion('source')
			$('.bs-chinese-region').chineseRegion('level', min, max)
			$('.bs-chinese-region').chineseRegion('render', id)
		});

		$(function() {
			$('.bs-chinese-region').chineseRegion('source', data).on('changed.bs.chinese-region', function(e, areas) {
				
			});
		});
    		
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	

	$("#form01").submit(function(){
				//获得 js 对象  
				var cxtime = $(".cxtime").val();
				var address = $("#address").val();
				var carnumber = $("#carnumber").val();
				var driver = $("#driver").val();
				var casephone = $("#casephone").val();
				var insuredname = $("#insuredname").val();
				var identity = $("#identity").val(); 
				//判断是否为空，如果是空 的话 弹出 提示消息 昵称不能为空！
				//判断是否为空，如果是空 的话 弹出 提示消息 昵称不能为空！
				var $casephone1 = $("#casephone").val();
				var $identity1 = $("#identity").val(); 
				var $carnumber1 = $("#carnumber").val();
				var cepai=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
				var regmobile = /^1\d{10}$/;
				var id=/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				
				
				if(cxtime==null || cxtime ==""){
					alert("请选择出险时间");
					return false;
				}
				else if(address==null || address ==""){
					alert("请选择出险地点");
					return false;
					
				}
				else if(carnumber==null || carnumber ==""){
					alert("请输入车牌号码");
					return false;
				}
				else if(cepai.test($carnumber1)==false){
					alert("请输入正确的车牌号码");
					return false;
				}
				else if(driver==null || driver ==""){
					alert("请输入驾驶员");
					return false;
				}
				else if(casephone==null || casephone ==""){
					alert("请输入电话");
					return false;
				}else if(regmobile.test($casephone1)==false){
						alert("手机号码格式不正确");
						return false;
					
				}else if(insuredname==null || insuredname ==""){
					alert("请选择被保人姓名");
					return false;
				}
				else if(identity==null || identity ==""){
					alert("请选择被保人证件号");
					return false;
				}else if(id.test($identity1)==false){
					alert("证件号格式不正确");
					return false;
				}
	});
    			
    		
</script>
    
</html>